<template>
	<view class="content">
		<view>
			<image :src="switchBackgroundIcon()" class="tupian"></image>
		</view>
		<view style="width:100%;height:160rpx;background:url(../../static/center/empty.png);display:flex;flex-shrink: 0;position: relative;bottom:170rpx;">
			<view style="width:140rpx;height:140rpx;margin-left:20rpx;margin-top:10rpx;background:white;">
				<view style="width:128rpx;height:128rpx;margin:6rpx;">
					<image :src="switchIcon()" style="width:100%;height:100%;" id="icon" />
				</view>
			</view>
			<view style="flex-grow:1;height:100rpx;margin-top:4rpx;margin-left:20rpx;color:white;">
				<view style="font-size:16;" id="name">{{gzhName}}</view>
				<view style="font-size:13;">
					<span id="addr">{{addr}}</span>
				</view>
				<view style="font-size:13;margin-top:-6rpx;">
					<span id="phone">手机号：{{phone}}</span>
					<span style="float:right;margin-right:20rpx;"><a id="phone_call" href="" @click="dadianhua()">拨打电话</a></span>
				</view>
				<view style="height:36rpx;">
					<view style="width:200rpx;height:32rpx;background:orange;font-size:12;line-height:32rpx;border-radius:16rpx;padding-left:10rpx;">
						<span @click="daohan()">导航：去这里</span>
					</view>
				</view>
			</view>
		</view>
		
		<view class="good-box" v-if="allGoods.length>0">
			<view class="goods-item" v-for="(item,i) in allGoods" :key="item.gid" @click="goDetail(item.gid)">
				<image :src="switchImg(allGoods,i)" class="goods-img" mode=""></image>
				<view class="fgx">
					<view class="goods-miaoshu" style="color: #82848A;">{{item.gName}}</view>
					<view class="small-container">
						<view style="font-size: 10px;">
							<text class="qian">{{item.gPrice}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-show="allGoods.length<1" class="no-goods-box">
			<view>商家还没有商品</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allGoods:[ ],// 分页查询的商品
				// tips:"上拉加载更多数据",
				page:1,		// 当前页数
				limit:10,	// 每页数量
				gzhid:0,	// 联盟商家ID
				phone:12345,// 手机号
				gzhName:"携联",//联盟商家名称
				addr:"湖南省-株洲市",//联盟商家地址
				icon:"",	// 联盟商家头像
				backgroundIcon:"",//联盟商家背景图片
			}
		},
		// onReachBottom() {
		// 	if(this.tips=='上拉加载更多数据')
		// 	{
		// 		this.page++;
		// 		this.getGoodsByType();
		// 	}
		// },
		onLoad(opt) {
			// 查询商品
			this.getGoodsByType(opt.gzhId);
			this.gzhid=opt.gzhId;this.gzhName=opt.name;
			this.icon=opt.icon;this.addr=opt.addr;this.phone=opt.phone;
			this.$http.get('/gzh/getBgById', {
				userid: opt.gzhId
			}).then(res => {
				if(res.data.code == 200) {
					this.backgroundIcon=res.data.data;
				}
			})
		},
		methods: {
			// n:排序规则
			getGoodsByType(gzhId){
				this.$http.get('/wapgoods.do', {
					p:'findAllGzhgoods',
					id:gzhId
				}).then(res => {
					if(res.data.list.length>0)
						this.allGoods=this.allGoods.concat(res.data.list);
					else{
						this.tips="没有更多数据";
					}
				})
			},
			switchImg(obj,n){
				if(obj.length>0)
					return this.host+obj[n].gImages;
				else
					return '../../static/index/gm.png';
			},
			switchIcon(){
				if(!this.isNull(this.icon)){
					if(this.icon.indexOf("http")!=-1){//图片地址中包含“http”
						return this.icon;
					}
					return this.host+this.icon;
				}else{
					return '../../static/center/yuantiao.jpg';
				}
			},
			switchBackgroundIcon(){
				if(!this.isNull(this.backgroundIcon))
					return this.host+this.backgroundIcon;
				else
					return '../../static/center/yuantiao.jpg';
			},
			//查看商品详情
			goDetail(n){
				uni.navigateTo({
					url:'../goods/goodsDetail?gid='+n
				})
			},
			//点击导航
			daohan(){
				console.log("点击导航了");
			},
			//拨打联盟商家电话
			dadianhua(){
				uni.makePhoneCall({
				    phoneNumber: this.phone //仅为示例
				});
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tupian{
		width: 100%;
		height: 370rpx;
	}
	.good-box{
		display: flex;
		flex-wrap: wrap;
		margin-top:-170rpx;
		justify-content: space-around;
	}
	.goods-item {
	    width: 49%;
	    margin: 5rpx auto;
	    background-color: white;
	    padding: 20rpx 5rpx;
	}
	.goods-item .goods-img {
	    height: 200rpx;
	    width: 100%;
	    display: block;
	    margin: auto;
	}
	.fgx {
	    // border-top: 1px solid #ccc;
	    width: 80%;
	    margin: auto;
	    margin-top: 0.625rem;
		padding-top: 10rpx;
		text-align: center;
	}
	.qian::before {
	    content: '￥';
	    color: red;
	    font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
	}
	.goods-miaoshu{
		display:-webkit-box;
		overflow:hidden;
		text-overflow:ellipsis;
		-webkit-line-clamp:1;
		-webkit-box-orient:vertical;
	}
	.small-container {
		margin-top: 10rpx;
	    display: flex;
		font-size: 7rpx;
		font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
		color: red;
	    // justify-content: space-between;
		justify-content: center;
	}
	.small-container>view:nth-child(2)>.xiaoche {
	    width: 40rpx;
		height: 40rpx;
	}
	.tips-text,.no-goods-box{
		text-align: center;
	}
	.good-box::after{
		content: '';
		width: 50%;
	}
</style>
